<template>
    <view>
        <view class="vipCenterTop">
            <video :src="videos[0]" :poster="videos[1]" class="vipCenterVideo"></video>
        </view>
        <view class="vipCenterBody">
            <view class="vipCenterBodyTitle">
                <image :src="item" v-for="(item, index) in images" :key="index" class="vipCenterInfoImg" mode="widthFix"
                    @click="showImg(index)" />
            </view>
        </view>
        <view id="vipBuyBackground" @click="buyVip">
            <view id="vipBuy">
                立即成为会员
            </view>
        </view>
        <uni-popup ref="popup" :animation="false" :maskClick="true">
            <view class="popup-view">
                <view style="display: flex">
                    <image :src="huiyaunimg" class="huiyaunimg"></image>
                    <image :src="close_img" class="closeimg" @click="close"></image>
                </view>

                <view id="vipBuyPop">
                    <view id="vipBuyContent">
                        <view style="height: 40rpx;"></view>
<!--                        <picker mode="selector" @change="vipTypeChange" range-key="name" :value="value" :range="vipTypes">-->
<!--                            <view id="vipTypePicker">-->
<!--                                名称:-->
<!--                                <view class="vipTypePickerSpan">{{ selVip.name }}</view>-->
<!--                            </view>-->
<!--                        </picker>-->
                        <view class="vipTypePicker">
                            会员类型:
                        </view>
                        <view>
                            <scroll-view scroll-y="true" show-scrollbar="true" enabled="true" class="scroll" >
                                <radio-group @change="vipTypeChange" class="radio-group-view">
                                    <label v-for="(item, index) in vipTypes" :key="index">
                                        <radio :value="index" :checked="index === current" />
                                        <text style="font-size: 30rpx;letter-spacing: 1px;">{{item.name}}</text><br/>
                                    </label>
                                </radio-group>
                            </scroll-view>
                        </view>
                        <view class="vipTitleInfo">
                            <view class="vipTypePicker">会员专属权益:</view>
                              <scroll-view scroll-y style="height: 250rpx;">
                                  <span style="margin-left: 12rpx;font-size: 30rpx;display: block;text-align:left;letter-spacing: 1px"
                                      v-for="(item, index) in selVip.rights" :key="index">
                                      {{ (index + 1)+'.' + item }}
                                  </span>
                              </scroll-view>
                        </view>
                        <view>
                            <view class="vipTypePicker" style="margin-top: -250rpx">会员价格:</view>
                            <span style="color: #EA1212FF;font-size: 40rpx;margin-left: 10rpx;">￥</span><span style="font-size: 55rpx;font-weight: bold;color: #EA1212FF">{{
                                selVip.price
                                }}</span>
                        </view>
                        <view style="height: 60rpx"></view>
                        <view style="color: #EA1212FF; font-size: 26rpx; text-align: center; width: 100%;letter-spacing: 1px">
                            开通后如需退款请至云易健康店内!
                        </view>
                        <view style="height: 20rpx"></view>
                        <view class="submitBtn" @click="payment">
                            确认购买
                        </view>
                    </view>
                </view>
            </view>

        </uni-popup>
    </view>
</template>

<script>
import TuiRadioGroup from "../../../components/thorui/tui-radio-group/tui-radio-group.vue";

const util = require("@/utils/util.js")
export default {
    components: {TuiRadioGroup},
    data() {
        return {
            videos: [
                'https://blogobs.88688.team/shop/20231017/d55b982173ff481490fb4f24c804818e.mp4',
                'https://blogobs.88688.team/shop/20231017/6f011853c0a04d6a9a4823bff4918c3a.png'
            ],
            images: [
                "https://blogobs.88688.team/shop/20231017/6b59420c0b784d8b8ceefe886488757b.png",
                "https://blogobs.88688.team/shop/20231017/f03cecbf2dee42d9af8d5b20e2d4ef49.png",
                "https://blogobs.88688.team/shop/20231017/23be0a699d3b431391bd44b6308ecb05.png",
                "https://blogobs.88688.team/shop/20231017/119b2ae4577c45619f5649f71c060bf5.png",
            ],
            vipType: 'TEMP',
            current: 0,
            vipTypes: [],
            selVip: {},
            huiyaunimg: 'https://sggg.88688.team/obs/yyjk/chengweihuyuanimg.png',
            close_img: 'https://sggg.88688.team/obs/yyjk/close_img.png'
        }
    },
    computed: {
        // 判断是否是会员
        isVip() {
            return uni.getStorageSync('vip')
        }
    },
    async onLoad() {
        await this.loadPage();
        if (this.isVip) {
            //如果已经是会员了 返回
            uni.showModal({
                content: '您已经是会员了,需要再次购买吗?',
                success: (res) => {
                    if (res.confirm) {
                    } else {
                        uni.navigateBack({})
                    }
                },
                fail: (fail) => {
                    uni.navigateBack({})
                },
            })
        }
    },
    onShow(){
        this.queryByuserId();
        this.getVipTypes()
    },
    methods: {
        async loadPage() {
            let that = this;
            await util.request('vipOrder/getConfigValue?key=VIP_CENTER_VIDEO').then(res => {
                console.log('result is ', res)
                if (res.code == 0)
                    that.videos = res.msg.split(',')
            })
            await util.request('vipOrder/getConfigValue?key=VIP_CENTER_BACKGROUND').then(res => {
                if (res.code == 0)
                    that.images = res.msg.split(',')
            })
        },
        getVipTypes() {
            util.request('vipOrder/getVipTypes', {}, 'GET').then(res => {
                console.log("res=============>",res.data.length)
                this.vipTypes = res.data
                for (const key in this.vipTypes) {
                    this.vipTypes[key].rights = this.vipTypes[key].rights.split(",")
                }
                this.vipTypes.sort((a, b) => {
                    if (a.sort > b.sort)
                        return 1
                    else if (a.sort < b.sort)
                        return -1
                    return 0
                })
                this.vipTypeChange()
            })
        },
        // 获取当前登录用户是不是会员
        queryByuserId(){
            util.request('user/queryByuserId?userid='+uni.getStorageSync('userId')).then(function(res) {
                if(res.data != null){
                    uni.removeStorageSync('vip');
                    uni.setStorageSync('vip', res.data.vip);
                }
            });
        },
        vipTypeChange(e) {
            if (e != undefined) {
                let index = e.detail.value
                this.vipType = this.vipTypes[index].id
                this.selVip = this.vipTypes[index]
            } else {
                this.vipType = this.vipTypes[0].id
                this.selVip = this.vipTypes[0]
            }
            // console.log("this.vipType=======>",this.vipType)
        },
        //点击图片显示大图
        showImg(index) {
            uni.previewImage({
                urls: this.images,
                current: index
            })
        },
        // 成为会员
        buyVip() {
            this.$refs.popup.open("center")
        },
        close() {
            this.$refs.popup.close()
        },
        //付款
        payment() {
            if (uni.getStorageSync("userInfo") == undefined || uni.getStorageSync("userInfo").mobile == undefined || uni.getStorageSync("userInfo").mobile == null || uni.getStorageSync("userInfo").mobile == '') {
                uni.showModal({
                    title: '未绑定手机号',
                    content: '未绑定手机号用户不可下单，是否前往绑定？',
                    success: (res) => {
                        if (res.confirm) {
                            uni.navigateTo({
                                url: '/pages/ucenter/set/set'
                            })
                        }
                    }
                })
                return
            }
            let data = {
                userId: uni.getStorageSync('userInfo').id,
                vipType: this.vipType
            }
            util.request('vipOrder/payment', data).then(res => {
                if (res.code == 0) {
                    wx.requestPayment({
                        timeStamp: res.data.timeStamp,
                        nonceStr: res.data.nonceStr,
                        package: res.data.packageVal,
                        signType: res.data.signType,
                        paySign: res.data.paySign,
                        appId: res.data.appId,
                        success: function (e) {
                            uni.showToast({
                                title: '支付成功',
                                icon: 'none'
                            })
                            this.$refs.popup.close()
                        },
                        fail: function (e) {
                            uni.showToast({
                                title: '支付失败',
                                icon: 'none'
                            })
                        }
                    })
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    })
                }
            })
        }
    },
}
</script>

<style scoped>
.vipCenterTop {
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.vipCenterVideo {
    width: 100%;
}

#vipBuy {
    position: fixed;
    bottom: 20rpx;
    height: 90rpx;
    border-radius: 16rpx;
    width: 94%;
    left: 3%;
    margin: 0 auto;
    background: rgb(3, 113, 254);
    color: white;
    display: flex;
    font-size: 38rpx;
    justify-content: center;
    align-items: center;
}

.vipCenterInfoImg {
    width: 100%;
    margin-top: -6rpx;
    padding: 0;
}

#vipBuyBackground {
    height: 130rpx;
    width: 100%;
    background: rgb(3, 113, 254);
}

.popup-view {
    background-color: #F6F6F6;
    border-radius: 20rpx;
    padding: 10rpx;
    width: 660rpx;
}

#vipBuyPop {
    height: 1020rpx;
    width: 580rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-top: -120rpx;
    border-radius: 15rpx 15rpx 0 0;
    position: relative;
    background-color: white;
    /*border: 1px solid orange;*/
}

.huiyaunimg {
    position: relative;
    z-index: 1;
    width: 110%;
    height: 250rpx;
    margin: 0 auto;
    margin-left: 30rpx;
}

.closeimg {
    height: 40rpx;
    width: 40rpx;
    position: relative;
    z-index: 1;
    margin: 10rpx;
    /*border: 1px solid red;*/
    /*top: -150rpx; !* 将图片上移10像素 *!*/
}

#vipBuyContent {
    padding: 10rpx;
    border-radius: 20rpx;
    margin: 0 auto;
    width: 90%;
    height: 90%;
    background: white;
    /*border: 1px solid red;*/
}

.vipTypePicker {
    height: 55rpx;
    width: 100%;
    background: white;
    margin: 10rpx auto;
    font-size: 35rpx;
    font-weight: bold;
    letter-spacing: 1px;
}

.scroll {
    height:180rpx;
    width: 500rpx;
}

.radio-group-view{//设置所有item的总样式
    line-height: 60rpx;
    margin-left: 10rpx;
}

.vipTypePickerSpan::after {
    content: ">";
    float: right;
    color: rgb(44, 132, 246);
    font-weight: bold;
    font-size: 34rpx;
    vertical-align: middle;
}

.vipTypePickerSpan {
    /* border: 1px solid #c3c0c0; */
    display: inline-block;
    vertical-align: middle;
    width: 80%;
    padding: 8rpx;
    color: rgb(44, 132, 246);
    border-radius: 10rpx;
    font-weight: 500;
    margin-left: 12rpx;
    font-size: 34rpx;
    background: rgb(215, 233, 255);
    border: 1px solid rgb(44, 132, 246);

}

.vipTypeRadioItem {
    display: inline-block;
}

.vipTypeRadioItem:not(:first-child) {
    margin-left: 20rpx;
    /*border: 1px solid orange;*/
    /*height: 100rpx;*/
}


::v-deep .wx-radio-input {
    border-color: #00000072;
    width: 12px;
    height: 12px;
}

::v-deep .wx-radio-input.wx-radio-input-checked {
    border-color: rgb(3, 113, 254);
    background-color: rgb(3, 113, 254) !important;
    background-size: 60% 60%;
    background-repeat: no-repeat;
    width: 12px;
    padding: 4rpx;
    height: 12px;
    background-clip: content-box !important;
    box-sizing: content-box;
}

::v-deep .wx-radio-input.wx-radio-input-checked::before {
    display: none !important;
}

.vipTitleInfo {
    line-height: 60rpx;
    /*margin: 20rpx;*/
    height: 570rpx;
}

.vipTitleInfo>view {
    /*margin: 24rpx;*/
    font-size: 32rpx;
}

.submitBtn {
    height: 70rpx;
    border-radius: 60rpx;
    width: 90%;
    left: 3%;
    margin: 0 auto;
    /*background: rgb(3, 113, 254);*/
    color: rgb(3, 113, 254);
    border: 1px solid rgb(3, 113, 254);
    line-height: 70rpx;
    display: flex;
    font-size: 38rpx;
    justify-content: center;
    align-items: center;
}
</style>
